<script setup lang="ts">
import { shallowRef, type Component } from 'vue';
import { useCultivation } from '../../../composables';
import { FEATURE_UNLOCK_ID } from '../../../game/data/feature-unlock/type';
import CultivationMainView from './main.vue';
import CultivationSkillView from './cultivation-kill/index.vue';
import SpiritRootView from './spiritual-root/index.vue';

const { activeMenu } = useCultivation();

const pageMap = shallowRef<Record<string, Component>>({
  [FEATURE_UNLOCK_ID.CULTIVATION]: CultivationMainView,
  [FEATURE_UNLOCK_ID.CULTIVATION_SKILL]: CultivationSkillView,
  [FEATURE_UNLOCK_ID.SPIRIT_ROOT]: SpiritRootView,
});
</script>

<template>
  <div class="w-full h-full overflow-auto relative">
    <component :is="pageMap[activeMenu]"></component>
  </div>
</template>
